<template>
  <aside class="w1 tab-report-container tab-content-has-control">
    <Card title="月电量报表" :dis-hover="true" :bordered="false">
      <div slot="extra">
        <Button @click="handleOnOpen" type="primary" shape="circle" icon="ios-search">
        </Button>
      </div>
      <div class="table-content card-body">
        <Drawer class="ivu-drawer-top" :title="companyInfo.name" width="300" v-model="visible" :mask="false">
          <SearchBar v-if="visible" :companyId="companyId" @change="handleChange" @download="handleDownload">
            <div slot="timeBar">
              <DatePicker :options="options" class="time-picker" v-model="date" type="month" placeholder="请选择日期..." @on-change="handleTimeChange" />
            </div>
          </SearchBar>
        </Drawer>
        <div class="table-header">
          <table class="table">
            <tr>
              <td>
                月电量最大值
              </td>
              <td>{{tableTop.maxValue}}</td>
              <td>发生时间</td>
              <td>{{tableTop.maxDate}}</td>
            </tr>
            <tr>
              <td>
                月电量最小值
              </td>
              <td>{{tableTop.minValue}}</td>
              <td>发生时间</td>
              <td>{{tableTop.minDate}}</td>
            </tr>
            <tr>
              <td>
                月电量累计
              </td>
              <td colspan=3>{{tableTop.total}}</td>
            </tr>
          </table>
        </div>
        <Table border :columns="columns" :data="tableData" style="margin-bottom:20px;">
        </Table>
      </div>
    </Card>
  </aside>
</template>
<script>
import mixin from "./mixin"
import {
  getPowerDay,
  getCompanyDetailByCompanyId,
  exportNxMonthPower
} from "@/api"
import SearchBar from "./SearchBar"
import Download from "@/utils/download"
import utils from "@/utils/utils"
export default {
  mixins: [mixin],
  components: { SearchBar },
  data: () => ({
    visible: false,
    companyInfo: { name: "设备列表" },
    searchData: {},
    loading: false
  }),
  mounted() {
    this.visible = true
    this.fetchCompanyInfo()
  },
  methods: {
    handleOnOpen() {
      this.visible = true
    },
    // 下载文件
    handleDownload() {
      const vm = this
      const searchData = utils.filterBlankValue(vm.searchData)
      const params = { ...searchData }
      const url = exportNxMonthPower(params)
      const download = new Download(url)
      vm.$Notice.open({
        title: "下载提示",
        desc: "文件正在下载，请至下载查看进度"
      })
      download.destory()
    },

    initData() {
      const vm = this
      vm.loading = true
      const searchData = this.searchData
      let params = {
        deviceNo: searchData.deviceNo,
        groupId: searchData.groupId,
        date: searchData.date
      }
      getPowerDay(params).then(res => {
        if (res.code === 200) {
          vm.tableData = res.data.list
          vm.tableTop = {
            total: res.data.total,
            minValue: res.data.minValue,
            minDate: res.data.minDate,
            maxValue: res.data.maxValue,
            maxDate: res.data.maxDate
          }
        } else {
          vm.tableData = []
          vm.tableTop = {
            total: "-",
            minValue: "-",
            minDate: "-",
            maxValue: "-",
            maxDate: "-"
          }
        }
        vm.loading = false
      })
    },

    handleChange(value) {
      const vm = this
      const date = vm.moment(vm.date).format("YYYY-MM")
      this.searchData = value
      this.searchData.date = date
      this.initData()
    },

    handleTimeChange() {
      const vm = this
      const date = vm.moment(vm.date).format("YYYY-MM")
      vm.searchData.date = date
      this.initData()
    },

    async fetchCompanyInfo() {
      const vm = this
      const companyId = vm.companyId
      const { data } = await getCompanyDetailByCompanyId(companyId)
      if (data) {
        this.companyInfo = data
      }
    }
  }
}
</script>
